/*
 * Ocean teması — bölüm stilleri.
 * Orijinal şablonda bu kurallar HTML içine gömülüydü; tema dosyalara
 * ayrıldığında kaybolmasın diye buraya toplandı.
 * Elle düzenlenebilir; kaynak HTML'e geri yazılmaz.
 */

/* ---- kaynak: index.htm satır içi blok #1 ---- */
.system-status-inline .status-indicator {
      display: flex;
      align-items: center;
    }
    
    .system-status-inline .status-dot {
      width: 10px;
      height: 10px;
      background: #10b981;
      border-radius: 50%;
      display: inline-block;
      margin-right: 6px;
      animation: statusBlink 2s ease-in-out infinite;
    }
    
    .system-status-inline .status-text {
      font-size: 14px;
      font-weight: 600;
      color: #10b981;
    }
    
    @keyframes statusBlink {
      0%, 100% {
        opacity: 1;
        transform: scale(1);
      }
      50% {
        opacity: 0.6;
        transform: scale(1.1);
      }
    }
    
    @media (max-width: 768px) {
      .system-status-inline .status-text {
        font-size: 12px;
      }
    }

/* ---- kaynak: index.htm satır içi blok #2 ---- */
/* Mobil menüde YENİ badge için CSS */
        #sidebar .blink{animation:softPulse 1.8s ease-in-out infinite;display:inline-block;will-change:transform,opacity}
        #sidebar .blink.green{background:rgba(16,185,129,.28);color:#065f46;padding:2px 6px;border-radius:6px}
        @keyframes softPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.06)}}

/* ---- kaynak: index.htm satır içi blok #3 ---- */
/* Header Renk Değişiklikleri */
                .top-bar {
                  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
                }
                
                .toplink1 a, .toplink2 a {
                  color: #ffffff !important;
                }
                
                .toplink1 a:hover, .toplink2 a:hover {
                  color: #4f9cf9 !important;
                }
                
                
                /* Soft ama belirgin pulse efekti */
                .navbar .nav-link .blink{animation:softPulse 1.8s ease-in-out infinite;display:inline-block;will-change:transform,opacity}
                .navbar .nav-link .blink.green{background:rgba(16,185,129,.28);color:#065f46;padding:2px 6px;border-radius:6px}
                @keyframes softPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.06)}}
                /* Dropdown show on hover */
                .navbar .dropdown:hover>.dropdown-menu{display:block}
                /* Server dropdown exact layout */
                .mega-dd, .server-dd{padding:0;border:none;background:transparent;position:relative}
                .mega-dd__panel, .server-dd__panel{width:860px;max-width:calc(100vw - 48px);background:#fff;border:1px solid #d9e4f5;border-radius:0 0 8px 8px;box-shadow:0 18px 32px rgba(2,6,23,.08),0 2px 4px rgba(2,6,23,.04);padding:16px 16px 18px;position:absolute;left:50%;transform:translateX(-50%);z-index:1002;border-top:0}
                .mega-dd__grid, .server-dd__grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:20px 30px}
                .mega-dd__item, .server-dd__item{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid #e0e7f1;border-left:3px solid #e0e7f1;border-radius:8px;text-decoration:none;transition:all .15s ease}
                .mega-dd__item i, .server-dd__item i{width:32px;height:32px;flex:0 0 32px;border-radius:4px;border:1px solid #bcd2ff;background:#eef5ff;color:#2f6ae1;display:flex;align-items:center;justify-content:center;line-height:1}
                .mega-dd__item > div, .server-dd__item > div{min-width:0}
                .mega-dd__title, .server-dd__title{font-weight:700;color:#0f172a}
                .mega-dd__desc, .server-dd__desc{font-size:12px;color:#6b7280;margin-top:3px}
                .mega-dd__item:hover, .server-dd__item:hover{border-color:#2f6ae1;border-left-color:#2f6ae1;background:#f6faff;box-shadow:0 8px 16px rgba(47,106,225,.12);transform:translateY(-1px)}
                .mega-dd__info, .server-dd__info{margin-top:16px;background:#eaf3ff;border:1px solid #cfe0ff;border-radius:8px;padding:12px 14px}

                .mega-dd__badge, .server-dd__badge{display:inline-block;background:#ff9f1a;color:#fff;font-weight:900;border-radius:8px;padding:4px 10px;margin-right:10px}

/* ---- kaynak: index.htm satır içi blok #4 ---- */
.domain-grid {display: grid;grid-template-columns: repeat(6, 1fr);gap: 20px;margin-top: 20px}
  .domain-card {position: relative;display: flex;flex-direction: column;gap: 8px;background: #fff;border: 1px solid #e6e8ee;border-radius: 10px;padding: 18px;box-shadow: 0 1px 1px rgba(44,50,66,.06), 0 8px 8px rgba(44,50,66,.01);text-decoration: none}
  .domain-card .ext {font-size: 28px;font-weight: 700;color: #0b64b7}
  .domain-card .discount {position: absolute;right: 12px;top: 12px;background: #e9fbf3;color: #16a34a;border-radius: 8px;padding: 4px 8px;font-size: 12px;font-weight: 700}
  .domain-card .meta {color: #6b7280;font-size: 13px}
                  .domain-card .price {font-size: 20px;font-weight: 800;color: #0f172a}
                  .domain-card .arrow {position: absolute;right: 14px;bottom: 12px;color: #0f172a;font-weight: 900}
  .domain-card:hover {border-color: #cfd6e4;transform: translateY(-1px);transition: .15s ease}
  @media (max-width: 1199px) {.domain-grid {grid-template-columns: repeat(3, 1fr)}}
  @media (max-width: 767px) {.domain-grid {grid-template-columns: repeat(2, 1fr)}}
  
  /* Page banners için position relative */
  .page-banners {
    position: relative;
  }
  /* Hero (domain arama) bölümünde kalan noktalı arka planları tamamen kapat */
  .main-hero.pink,
  .main-hero.pink:before,
  .main-hero.pink:after,
  .main-hero .container:before,
  .main-hero .container:after,
  .main-hero .hero-item:before,
  .main-hero .hero-item:after { background: none !important; background-image: none !important; content: none !important; }

/* ---- kaynak: index.htm satır içi blok #5 ---- */
.infra-hardware {padding: 40px 0}
.infra-hardware .section-title {margin: 0 0 12px}
.infra-hardware .section-title .eyebrow {display:inline-block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color:#6b7280; font-weight:600}
.infra-hardware .section-title .title {font-weight:800; margin:4px 0 0}
.infra-hardware .brands-marquee {position:relative; overflow:hidden; margin-top: 16px;}
.infra-hardware .brands-marquee .track {display:flex; align-items:center; gap:40px; width:max-content; animation: infraScroll 36s linear infinite}
.infra-hardware .brands-marquee img {height:32px; width:auto; object-fit:contain; filter:grayscale(100%); opacity:.9}
.infra-hardware .more {margin-top:24px; color:#5b6577}
@keyframes infraScroll {from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (max-width: 767px){
  .infra-hardware .brands-marquee img {height:24px}
  .infra-hardware .brands-marquee .track {gap:20px}
}

/* ---- kaynak: index.htm satır içi blok #6 ---- */
.market {
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
  padding-left: 30px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row;
  flex-flow: row;
  justify-content: center;
}
.market span {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row;
    flex-flow: row;
    justify-content: center;
}
.market sub {
    color: #242736;
    font-size: 16px;
    font-weight: 500;
    bottom: 0;
    top: 14px;
    left: 5px;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
}
.market sup {
    display: flex
;
    font-size: 24px;
    top: -10px;
    left: -24px;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
}
.market sup > small {
    font-size: 21px;
    font-weight: 600;
    margin-left: 3px;
    font-family: Arial;
}

/* ---- kaynak: index.htm satır içi blok #7 ---- */
/* Özellik kutuları - ekran görüntüsü ile uyumlu basit stil */
        #neden-turbyte .feature-card { display: flex; gap: 16px; background: #fff; border: 1px solid #e9eef2; border-radius: 6px; padding: 22px; height: 100%; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
        #neden-turbyte .feature-icon { width: 48px; height: 48px; border-radius: 8px; background: #eaf7ee; color: #1aaa55; display: flex; align-items: center; justify-content: center; font-size: 22px; min-width: 48px; }
        #neden-turbyte .feature-card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
        #neden-turbyte .feature-card p { margin: 0; font-size: 14px; color: #6b7280; line-height: 1.6; opacity: 0.8; }
        #neden-turbyte .mb-24 { margin-bottom: 24px; }

/* ---- kaynak: index.htm satır içi blok #8 ---- */
/* Customer Testimonials Styling - Exact match to screenshot */
.testimonials-section {
  background: #f8f9fa;
  padding: 80px 0;
}

.testimonials-header {
  margin-bottom: 60px;
}

.testimonials-title {
  font-size: 36px;
  font-weight: 700;
  color: #333;
  margin-bottom: 16px;
  line-height: 1.2;
}

.testimonials-subtitle {
  font-size: 18px;
  color: #6b7280;
  max-width: 600px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

/* Google Review Section - Photo exact match */
.google-review-section {
  text-align: center;
  margin: 40px auto;
  max-width: 300px;
  padding: 20px;
}

/* Clean Hosting Packages Design */
.home-banners .homeTabsColBox {
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  padding: 24px 20px !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  z-index: 10 !important;
}

.home-banners .homeTabsColBox ul li.title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 8px !important;
  text-align: left !important;
  line-height: 1.3 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
  display: block !important;
  float: none !important;
  clear: both !important;
  position: static !important;
}

.home-banners .homeTabsColBox ul li.desc {
  font-size: 13px !important;
  color: #64748b !important;
  margin-bottom: 16px !important;
  text-align: left !important;
  line-height: 1.4 !important;
  padding: 0 12px !important;
}

.home-banners .homeTabsColBox::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #3b82f6 !important;
  border-radius: 12px 12px 0 0 !important;
}

.home-banners .homeTabsColBox.blue::before {
  background: #3b82f6 !important;
}

.home-banners .homeTabsColBox.purple::before {
  background: #8b5cf6 !important;
}

.home-banners .homeTabsColBox.yellow::before {
  background: #f59e0b !important;
}

.home-banners .homeTabsColBox:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
  border-color: #3b82f6 !important;
}

.home-banners .homeTabsColBox ul li.title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 8px !important;
  text-align: left !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 5px !important;
}

.home-banners .homeTabsColBox ul li.desc {
  font-size: 13px !important;
  color: #64748b !important;
  margin-bottom: 16px !important;
  text-align: left !important;
  line-height: 1.5 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 5px !important;
}

.home-banners .homeTabsColBox ul {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.home-banners .homeTabsColBox .price {
  background: #f8fafc !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  border: 1px solid #e2e8f0 !important;
}

.home-banners .homeTabsColBox .price .plan-price span {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.home-banners .homeTabsColBox .price > small {
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

.home-banners .homeTabsColBox .simpleButton {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 12px 20px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

.home-banners .homeTabsColBox .simpleButton:hover {
  background: #1d4ed8 !important;
}

.home-banners .homeTabsColBox .features-divider {
  height: 1px !important;
  background: #e2e8f0 !important;
  border: none !important;
  margin: 20px 0 !important;
}

.home-banners .homeTabsColBox .features-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  margin-bottom: 12px !important;
  text-align: center !important;
}

.home-banners .homeTabsColBox .feature {
  background: #f8fafc !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  margin-bottom: 6px !important;
  border: 1px solid #e2e8f0 !important;
  font-size: 12px !important;
}

.home-banners .homeTabsColBox .feature i {
  color: #10b981 !important;
  margin-right: 6px !important;
  font-size: 12px !important;
}

.home-banners .homeTabsColBox .feature strong {
  color: #0f172a !important;
  font-weight: 600 !important;
}

.google-stars-container {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

.google-stars-image {
  width: 120px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.google-text-container {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333333;
  font-size: 15px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.google-label-text {
  font-weight: 400;
}

.google-rating-text {
  font-weight: 700;
  margin: 0 4px;
}

.google-separator-text {
  margin: 0 8px;
  color: #666666;
}

.google-count-text {
  font-weight: 400;
}









.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.testimonial-card {
  background: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.testimonial-stars {
  margin-bottom: 20px;
}

.testimonial-stars i {
  color: #d97706;
  font-size: 18px;
  margin-right: 2px;
}

.testimonial-quote {
  color: #6b7280;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 24px;
  flex-grow: 1;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.author-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.author-info {
  flex-grow: 1;
}

.author-name {
  font-weight: 600;
  color: #333;
  font-size: 16px;
  margin-bottom: 4px;
}

.author-title {
  color: #6b7280;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .testimonials-title {
    font-size: 28px;
  }
  
  .testimonial-card {
    padding: 24px;
  }
  
  .platform-reviews {
    gap: 20px;
    flex-direction: column;
    align-items: center;
  }
  
  .review-platform {
    min-width: 180px;
    padding: 16px;
  }
}

/* ---- kaynak: index.htm satır içi blok #9 ---- */
@keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-5px); }
            100% { transform: translateY(0px); }
        }
        @keyframes pulse {
            0% { transform: scale(1); opacity: 0.7; }
            50% { transform: scale(1.2); opacity: 0.3; }
            100% { transform: scale(1); opacity: 0.7; }
        }

/* ---- kaynak: index.htm satır içi blok #10 ---- */
@keyframes floatWA {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-5px); }
        100% { transform: translateY(0px); }
    }
    @keyframes pulseWA {
        0% { transform: scale(1); opacity: 0.7; }
        50% { transform: scale(1.2); opacity: 0.3; }
        100% { transform: scale(1); opacity: 0.7; }
    }

/* ---- kaynak: index.htm satır içi blok #11 ---- */
.modern-footer {
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
      color: #ffffff;
      margin-top: 0;
      position: relative;
      overflow: hidden;
    }

    .modern-footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    }

    .footer-main {
      padding: 50px 0 35px;
      position: relative;
    }

    .footer-main .container {
      max-width: 1550px;
    }

    .footer-main .row {
      margin-left: -25px;
      margin-right: -25px;
    }

    .footer-main .col-lg-4,
    .footer-main .col-lg-2,
    .footer-main .col-md-6 {
      padding-left: 25px;
      padding-right: 25px;
    }


    .footer-brand .footer-logo {
      display: inline-block;
      margin-bottom: 25px;
      transition: transform 0.3s ease;
    }

    .footer-brand .footer-logo:hover {
      transform: scale(1.05);
    }

    .footer-brand .logo-img {
      max-width: 160px;
      height: auto;
      filter: brightness(0) invert(1);
      opacity: 0.9;
    }

    .footer-description {
      color: #b8c5d6;
      font-size: 15px;
      line-height: 1.7;
      margin-bottom: 30px;
      font-style: italic;
    }

    .footer-contact-info {
      margin-top: 25px;
    }

    .contact-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 18px;
      color: #b8c5d6;
      transition: color 0.3s ease;
    }

    .contact-item:hover {
      color: #ffffff;
    }

    .contact-item i {
      color: #4f9cf9;
      margin-right: 15px;
      margin-top: 3px;
      width: 18px;
      font-size: 16px;
    }

    .contact-item span {
      font-size: 15px;
      line-height: 1.6;
    }

    .footer-section {
      margin-bottom: 35px;
    }

    .footer-section h5 {
      margin-top: 30px;
      position: relative;
    }

    .footer-section h5:first-child {
      margin-top: 0;
    }

    .footer-section h5:not(:first-child)::before {
      content: '';
      position: absolute;
      top: -15px;
      left: -15px;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, 
        rgba(79, 156, 249, 0.6) 0%, 
        rgba(79, 156, 249, 0.3) 50%, 
        transparent 100%);
    }


    .footer-section-with-divider {
      position: relative;
    }

    .footer-section-with-divider::before {
      content: '';
      position: absolute;
      left: -15px;
      top: 15px;
      bottom: 15px;
      width: 2px;
      background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(79, 156, 249, 0.2) 20%, 
        rgba(79, 156, 249, 0.6) 50%, 
        rgba(79, 156, 249, 0.2) 80%, 
        transparent 100%);
      border-radius: 1px;
    }


    @media (max-width: 991px) {
      .footer-section-with-divider::before {
        display: none;
      }
    }

    .footer-title {
      color: #ffffff;
      font-size: 17px;
      font-weight: 500;
      margin-bottom: 15px;
      position: relative;
      padding-bottom: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }


    .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .footer-links li {
      margin-bottom: 10px;
    }

    .footer-links a {
      color: #b8c5d6;
      text-decoration: none;
      font-size: 15px;
      transition: all 0.3s ease;
      display: block;
      padding: 3px 0;
      position: relative;
    }

    .footer-links a:hover {
      color: #4f9cf9;
      padding-left: 8px;
    }

    .footer-links a::before {
      content: '→';
      position: absolute;
      left: -15px;
      opacity: 0;
      transition: all 0.3s ease;
      color: #4f9cf9;
    }

    .footer-links a:hover::before {
      opacity: 1;
      left: -12px;
    }

    .footer-bottom {
      background: rgba(0, 0, 0, 0.2);
      padding: 35px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer-bottom-left {
      display: flex;
      align-items: center;
      margin-bottom: 25px;
    }

    .btk-logo {
      width: 70px;
      height: auto;
      margin-right: 25px;
      filter: brightness(0) invert(1);
      opacity: 0.8;
    }

    .btk-text {
      color: #b8c5d6;
      font-size: 13px;
      line-height: 1.5;
      margin: 0;
      font-style: italic;
    }

    .social-links {
      display: flex;
      justify-content: flex-end;
      gap: 18px;
      margin-bottom: 25px;
    }

    .social-link {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 45px;
      height: 45px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 50%;
      color: #b8c5d6;
      text-decoration: none;
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .social-link:hover {
      background: #4f9cf9;
      color: #ffffff;
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(79, 156, 249, 0.3);
    }

    .social-link.instagram:hover {
      background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    }

    .social-link.facebook:hover {
      background: #3b5998;
    }

    .social-link.twitter:hover {
      background: #1da1f2;
    }

    .social-link.linkedin:hover {
      background: #0077b5;
    }

    .footer-divider {
      border: none;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      margin: 25px 0;
    }

    .copyright-text {
      color: #b8c5d6;
      font-size: 15px;
      margin: 0;
      font-style: italic;
    }

    .legal-links {
      display: flex;
      justify-content: flex-end;
      gap: 25px;
    }

    .legal-links a {
      color: #b8c5d6;
      text-decoration: none;
      font-size: 15px;
      transition: all 0.3s ease;
      padding: 5px 10px;
      border-radius: 3px;
    }

    .legal-links a:hover {
      color: #4f9cf9;
      background: rgba(79, 156, 249, 0.1);
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      .footer-main {
        padding: 40px 0 25px;
      }

      .footer-bottom-left {
        flex-direction: column;
        text-align: center;
        margin-bottom: 30px;
      }

      .btk-logo {
        margin-right: 0;
        margin-bottom: 20px;
      }

      .social-links {
        justify-content: center;
        gap: 15px;
      }

      .legal-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
      }

      .footer-bottom .row > div {
        text-align: center;
      }
    }

    @media (max-width: 576px) {
      .legal-links {
        flex-direction: column;
        gap: 15px;
      }
      
      .social-links {
        gap: 12px;
      }
      
      .social-link {
        width: 40px;
        height: 40px;
      }
    }

/* =========================================================================
   İç sayfalar — Ocean teması için yazılan bölümler.
   (Orijinal şablonda karşılığı yoktu; kategori/ürün/blog/iletişim sayfaları
   bu kurallarla basılır.)
   ========================================================================= */

.ocean-page-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #fff;
    padding: 54px 0 58px;
}
.ocean-page-hero h1 { font-size: 34px; font-weight: 800; margin: 0 0 12px; line-height: 1.25; }
.ocean-page-hero p { font-size: 16px; opacity: .85; margin: 0; max-width: 760px; line-height: 1.75; }

.ocean-eyebrow {
    display: inline-block; border: 1px solid rgba(255,255,255,.35);
    color: #fff; font-weight: 700; font-size: 12px;
    padding: 5px 16px; border-radius: 30px; margin-bottom: 14px;
}

.ocean-breadcrumb { font-size: 13px; margin-bottom: 14px; color: rgba(255,255,255,.65); }
.ocean-breadcrumb a { color: rgba(255,255,255,.65); text-decoration: none; }
.ocean-breadcrumb a:hover { color: #fff; }
.ocean-breadcrumb .sep { margin: 0 8px; opacity: .5; }
.ocean-breadcrumb .current { color: #fff; font-weight: 600; }

.ocean-section { padding: 64px 0; }
.ocean-section--light { background: #f7f9fc; }
.ocean-section--white { background: #fff; }

.ocean-section__head { text-align: center; margin-bottom: 40px; }
.ocean-section__head h2 { font-size: 28px; font-weight: 800; color: #0f172a; margin: 0 0 10px; }
.ocean-section__head p { color: #6b7280; margin: 0; }

.ocean-empty {
    background: #fff; border: 1px solid #e0e7f1; border-radius: 10px;
    padding: 48px 24px; text-align: center; color: #475569;
}

/* --- Paket kartı --- */
.ocean-plan {
    background: #fff; border: 1px solid #e0e7f1; border-radius: 12px;
    padding: 28px 24px; height: 100%; display: flex; flex-direction: column;
    position: relative; transition: box-shadow .2s ease, transform .2s ease;
}
.ocean-plan:hover { box-shadow: 0 14px 30px rgba(2,6,23,.09); transform: translateY(-3px); }
.ocean-plan.featured { border-color: var(--ocean-accent, #2f6ae1); border-width: 2px; }
.ocean-plan__badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--ocean-accent, #2f6ae1); color: #fff; font-size: 12px;
    font-weight: 700; padding: 4px 16px; border-radius: 30px; white-space: nowrap;
}
.ocean-plan__name { font-size: 19px; font-weight: 700; color: #0f172a; margin: 0 0 6px; }
.ocean-plan__desc { font-size: 14px; color: #6b7280; margin: 0 0 16px; }
.ocean-plan__price { font-size: 30px; font-weight: 800; color: var(--ocean-accent, #2f6ae1); margin-bottom: 18px; }
.ocean-plan__price small { font-size: 13px; font-weight: 500; color: #475569; }

.ocean-plan__specs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    border-top: 1px solid #f1f5f9; padding-top: 16px; margin-bottom: 16px;
}
.ocean-plan__spec { text-align: center; background: #f7f9fc; border-radius: 8px; padding: 10px 6px; }
.ocean-plan__spec strong { display: block; font-size: 15px; color: #0f172a; }
.ocean-plan__spec span { font-size: 11px; color: #475569; text-transform: uppercase; letter-spacing: .04em; }

.ocean-plan__features { list-style: none; padding: 0; margin: 0 0 20px; }
.ocean-plan__features li { font-size: 14px; color: #475569; padding: 5px 0; display: flex; gap: 9px; align-items: flex-start; }
.ocean-plan__features i { color: #10b981; margin-top: 4px; flex-shrink: 0; font-size: 12px; }

.ocean-plan__btn {
    margin-top: auto; display: block; text-align: center; text-decoration: none;
    background: var(--ocean-accent, #2f6ae1); color: #fff; font-weight: 700;
    padding: 12px 0; border-radius: 9px; transition: background .2s ease;
}
.ocean-plan__btn:hover { background: var(--ocean-accent-dark, #1e4bb8); color: #fff; text-decoration: none; }

/* --- Kart / kutu --- */
/*
 * height:100% BURADA YOK. Kart bir sütunun tek çocuğuysa (yan yana kartların
 * eşit boyda durması istenen ızgara düzeni) aşağıdaki kural yüksekliği verir.
 *
 * Kural genel olduğunda blog kenar çubuğu bozuluyordu: aside esnek satırda
 * içerik sütunu kadar uzuyor, üst üste duran İKİ kart da o yüksekliği birden
 * alıyor ve toplam iki katına çıkıp sayfayı footer'ın altına taşırıyordu.
 */
.ocean-card {
    background: #fff; border: 1px solid #e0e7f1; border-radius: 12px;
    padding: 28px;
}
[class*="col-"] > .ocean-card:only-child { height: 100%; }
.ocean-card h3 { font-size: 18px; font-weight: 700; color: #0f172a; margin: 0 0 10px; }
.ocean-card p { font-size: 14px; color: #6b7280; line-height: 1.8; margin: 0; }

/* --- Form --- */
.ocean-form label { font-weight: 600; font-size: 14px; color: #334155; margin-bottom: 6px; display: block; }
.ocean-form .form-control { border: 1px solid #ddd; border-radius: 9px; padding: 11px 14px; font-size: 15px; }
.ocean-form .form-control:focus { border-color: var(--ocean-accent, #2f6ae1); box-shadow: 0 0 0 3px rgba(47,106,225,.15); }
.ocean-btn {
    background: var(--ocean-accent, #2f6ae1); color: #fff; border: none;
    padding: 12px 30px; border-radius: 9px; font-weight: 700; cursor: pointer;
    text-decoration: none; display: inline-block; transition: background .2s ease;
}
.ocean-btn:hover { background: var(--ocean-accent-dark, #1e4bb8); color: #fff; text-decoration: none; }

/* --- Blog --- */
.ocean-post {
    background: #fff; border: 1px solid #e0e7f1; border-radius: 12px;
    overflow: hidden; height: 100%; display: flex; flex-direction: column;
    text-decoration: none; transition: box-shadow .2s ease, transform .2s ease;
}
.ocean-post:hover { box-shadow: 0 14px 30px rgba(2,6,23,.09); transform: translateY(-3px); text-decoration: none; }
.ocean-post__img { aspect-ratio: 16/9; background: #eef5ff; overflow: hidden; }
.ocean-post__img img { width: 100%; height: 100%; object-fit: cover; }
.ocean-post__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.ocean-post__cat {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    margin-bottom: 8px;
    /* Panelden secilen kategori rengi --kat-renk ile gelir. Acik tonlar beyaz
       uzerinde okunmadigi icin yazi koyulastirilir, zemin ayni renkten uretilir. */
    color: var(--ocean-accent, #2f6ae1);
    color: color-mix(in srgb, var(--kat-renk, #2f6ae1) 72%, #0b1220);
}
.ocean-post__title { font-size: 17px; font-weight: 700; color: #0f172a; line-height: 1.45; margin: 0 0 9px; }
.ocean-post__excerpt { font-size: 14px; color: #6b7280; line-height: 1.7; margin: 0 0 14px; }
.ocean-post__meta { margin-top: auto; padding-top: 12px; border-top: 1px solid #f1f5f9; font-size: 12px; color: #475569; }

.ocean-prose { color: #374151; font-size: 16px; line-height: 1.85; }
.ocean-prose h2, .ocean-prose h3 { color: #0f172a; font-weight: 700; margin: 28px 0 12px; }
.ocean-prose img { max-width: 100%; height: auto; border-radius: 10px; }
.ocean-prose a { color: var(--ocean-accent, #2f6ae1); }

@media (max-width: 767px) {
    .ocean-page-hero { padding: 36px 0 40px; }
    .ocean-page-hero h1 { font-size: 26px; }
    .ocean-section { padding: 44px 0; }
    .ocean-plan__specs { grid-template-columns: 1fr 1fr; }
}