/* =========================================================
   OZ CEYLAN TURIZM - FINAL STYLE.CSS
   (Home slider + WhatsApp fixed + References marquee zebra + Premium Contact)
   ========================================================= */

/* ===== BASE ===== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  color:#111;
  background:#fff;
}

:root{
  --brand-dark:#0b0f14;      /* Kurumsal siyah */
  --brand-dark-2:#121824;    /* gradient ikinci ton */
  --text:#111;
  --muted:#666;
  --card:#fff;
  --line:rgba(0,0,0,.08);
  --shadow:0 10px 25px rgba(0,0,0,.12);
  --shadow-soft:0 8px 18px rgba(0,0,0,.10);
}

/* Genel container */
.container{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:24px 16px;
}

/* ===== HERO / HEADER ===== */
.site-hero{
  background: linear-gradient(180deg, var(--brand-dark) 0%, var(--brand-dark-2) 100%);
  color:#fff;
  padding:42px 16px;
}
.hero-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  justify-content:center;
}
.brand{
  display:flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
  color:inherit;
}
.brand-logo{ width:86px; height:auto; display:block; }
.brand-title{ margin:0; font-size:38px; font-weight:800; letter-spacing:.2px; }
.brand-tagline{ margin:6px 0 0 0; font-size:14px; opacity:.92; }

@media (max-width:600px){
  .brand{ flex-direction:column; text-align:center; }
  .brand-title{ font-size:30px; }
  .brand-logo{ width:74px; }
}

/* ===== HOME BOXES (KUTULAR YANYANA) ===== */
.homeboxes-wrap .container{ padding-top:18px; padding-bottom:6px; }

.home-boxes{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.home-box{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:220px;
  height:58px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  background:#fff;
  color:#0b2f4a;
  border:1px solid var(--line);
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, background .2s ease;
  padding:0 18px;
}
.home-box:hover{ background:#f6f8fb; transform: translateY(-2px); }

@media (max-width:768px){
  .home-box{ min-width:170px; }
}

/* ===== HOME SLIDER ===== */
.home-slider-wrap .container{ padding-top:12px; }
.home-slider-wrap{ margin:18px 0 0; }

.oc-slider{
  position:relative;
  width:100%;
  max-width:1100px;
  height:420px;
  margin:10px auto 24px;
  overflow:hidden;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.14);
  background:#000;
}

/* Kritik: alt alta düşmesin */
.oc-slides{
  display:flex !important;
  flex-wrap:nowrap !important;
  height:100%;
  width:100% !important;
  transition: transform .6s ease-in-out;
  will-change: transform;
}
.oc-slides img{
  flex:0 0 100% !important;
  min-width:100% !important;
  width:100% !important;
  height:100%;
  object-fit: cover;          /* "yakın" geliyorsa bunu contain yapmayalım, kalite bozulur.
                                 Geniş açı için fotoğrafın kendisini daha geniş kırpman lazım.
                                 İstersen object-position ile yukarı/aşağı ayarlarız. */
  display:block;
}

/* oklar */
.oc-prev,.oc-next{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:46px;
  height:46px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  z-index:10;
  background: rgba(0,0,0,.55);
  color:#fff;
  font-size:32px;
  line-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.92;
}
.oc-prev{ left:12px; }
.oc-next{ right:12px; }
.oc-prev:hover,.oc-next:hover{ background: rgba(0,0,0,.80); }

/* dots */
.oc-dots{
  position:absolute;
  left:50%;
  bottom:12px;
  transform: translateX(-50%);
  display:flex;
  gap:8px;
  z-index:11;
}
.oc-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.25);
  cursor:pointer;
}
.oc-dot.is-active{ background: rgba(255,255,255,.95); }

@media (max-width:768px){
  .oc-slider{ height:240px; }
}

/* ===== MAIN TYPOGRAPHY (sayfalar daha kurumsal) ===== */
.site-main{
  padding: 10px 0 26px;
}
.site-main h1, .site-main h2, .site-main h3{
  color:#0b2f4a;
  letter-spacing:.2px;
}
.site-main h1{ font-size:32px; margin: 6px 0 12px; }
.site-main h2{ font-size:22px; margin: 22px 0 10px; }
.site-main p{ color:#1a1a1a; max-width: 900px; }
.site-main hr{
  border:0;
  height:1px;
  background: rgba(0,0,0,.10);
  margin: 18px 0;
}

/* ===== FOOTER ===== */
.site-footer{
  background: linear-gradient(180deg, var(--brand-dark-2) 0%, var(--brand-dark) 100%);
  color:#fff;
  text-align:center;
  padding:18px 12px;
}
.site-footer p{ margin:0; font-size:14px; opacity:.95; }

/* ===== WhatsApp BUTTON (ikon büyümesin / img veya svg fark etmez) ===== */
a.whatsapp-float{
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 999999 !important;

  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;

  border-radius: 999px !important;
  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #25D366 !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.18) !important;
  text-decoration: none !important;
  overflow:hidden !important;
}

/* İçeride SVG varsa */
a.whatsapp-float svg{
  width: 24px !important;
  height: 24px !important;
  display:block !important;
}

/* İçeride IMG (whatsapp.png) varsa */
a.whatsapp-float img,
a.whatsapp-float .wa-icon{
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  display:block !important;
  object-fit: contain !important;
}

a.whatsapp-float, a.whatsapp-float *{ line-height:0 !important; }

/* =========================================================
   REFERENCES - MARQUEE (ZEBRA)  ✅ siyah-beyaz akış + hover renk
   HTML: .ref-section içinde .ref-marquee > .ref-track > .ref-item
   ========================================================= */
.ref-section{
  max-width:1100px;
  margin: 0 auto;
  padding: 10px 16px 18px;
}
.ref-section h2{
  text-align:center;
  margin: 16px 0 14px;
  font-weight: 800;
}

/* Marquee kutusu */
.ref-marquee{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:16px;
  background: #fff;
  border:1px solid var(--line);
  box-shadow: var(--shadow-soft);
  padding: 12px 0;
}

/* kenarlarda fade */
.ref-marquee:before,
.ref-marquee:after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:70px;
  z-index:2;
  pointer-events:none;
}
.ref-marquee:before{
  left:0;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%);
}
.ref-marquee:after{
  right:0;
  background: linear-gradient(270deg, #fff 0%, rgba(255,255,255,0) 100%);
}

.ref-track{
  display:flex;
  gap: 26px;
  align-items:center;
  width: max-content;
  padding: 0 26px;
  animation: refScroll 22s linear infinite;
  will-change: transform;
}

/* Zebra: 2,4,6... ters aksın */
.ref-section:nth-of-type(even) .ref-track{
  animation-direction: reverse;
}

/* Hover olunca dursun (premium his) */
.ref-marquee:hover .ref-track{
  animation-play-state: paused;
}

@keyframes refScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); } /* JS ile track içeriği 2x olmalı */
}

.ref-item{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  height: 64px;
}
.ref-item img{
  height: 56px;
  width:auto;
  display:block;
  filter: grayscale(100%);
  opacity: .85;
  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
.ref-item img:hover{
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-1px);
}

@media (max-width:768px){
  .ref-track{ gap: 18px; animation-duration: 18s; }
  .ref-item{ height: 56px; }
  .ref-item img{ height: 46px; }
  .ref-marquee:before, .ref-marquee:after{ width: 40px; }
}

/* =========================================================
   CONTACT PAGE (Joomla com_contact) - PREMIUM GRID
   Sadece iletişim sayfasında etki etsin:
   body.com-contact (Joomla genelde ekler)
   ========================================================= */
body.com-contact .site-main{
  padding-top: 18px;
}
body.com-contact .contact{
  max-width:1100px;
  margin: 0 auto;
  padding: 0 16px 24px;
}

/* Başlıkları toparla */
body.com-contact .contact h1,
body.com-contact .contact h2{
  text-align:center;
}
body.com-contact .contact h1{
  margin-top: 0;
  font-size: 34px;
}
body.com-contact .contact h2{
  margin: 6px 0 18px;
  font-size: 20px;
  color:#0b2f4a;
  opacity:.95;
}

/* İç layout: form + bilgi */
body.com-contact .contact .contact-form,
body.com-contact .contact .contact-address,
body.com-contact .contact .contact-position,
body.com-contact .contact .contact-miscinfo{
  box-sizing:border-box;
}

/* Joomla çıktısı farklı olabiliyor; genel kapsayıcı yaklaşım */
body.com-contact .contact > *{
  max-width:1100px;
}

/* Form + sağ kolon için grid */
body.com-contact .contact .contact-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: var(--shadow-soft);
  padding: 18px;
}

body.com-contact .contact .contact-address,
body.com-contact .contact .contact-position,
body.com-contact .contact .contact-miscinfo{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: var(--shadow-soft);
  padding: 18px;
}

/* Eğer Joomla wrapper varsa (çoğu sitede .contact > .row gibi) */
body.com-contact .contact .contact-form,
body.com-contact .contact .contact-address{
  margin-top: 10px;
}

/* 2 kolon dizilim (desktop) */
@media (min-width: 980px){
  body.com-contact .contact{
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 22px;
    align-items:start;
  }

  /* Başlıklar tüm satırı kaplasın */
  body.com-contact .contact h1,
  body.com-contact .contact h2{
    grid-column: 1 / -1;
  }

  /* Form solda, adres/konum sağda */
  body.com-contact .contact .contact-form{ grid-column: 1; }
  body.com-contact .contact .contact-address,
  body.com-contact .contact .contact-position,
  body.com-contact .contact .contact-miscinfo{
    grid-column: 2;
  }
}

/* Form alanları */
body.com-contact .contact form{
  margin:0;
}
body.com-contact .contact form label{
  font-weight:700;
  color:#0b2f4a;
  display:block;
  margin: 10px 0 6px;
}
body.com-contact .contact form input[type="text"],
body.com-contact .contact form input[type="email"],
body.com-contact .contact form input[type="tel"],
body.com-contact .contact form textarea{
  width:100%;
  border:1px solid rgba(0,0,0,.14);
  border-radius:12px;
  padding: 10px 12px;
  outline:none;
  transition: box-shadow .2s ease, border-color .2s ease;
  background:#fff;
}
body.com-contact .contact form textarea{ min-height: 140px; resize: vertical; }

body.com-contact .contact form input:focus,
body.com-contact .contact form textarea:focus{
  border-color: rgba(11,47,74,.35);
  box-shadow: 0 0 0 4px rgba(11,47,74,.10);
}

/* Buton */
body.com-contact .contact form button,
body.com-contact .contact form input[type="submit"]{
  margin-top: 12px;
  border:0;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 800;
  cursor:pointer;
  background: #0b2f4a;
  color:#fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
body.com-contact .contact form button:hover,
body.com-contact .contact form input[type="submit"]:hover{
  filter: brightness(1.05);
}

/* Harita (iframe) */
body.com-contact .contact iframe{
  width:100% !important;
  border:0 !important;
  border-radius: 12px !important;
  overflow:hidden !important;
}

/* =========================================================
   SMALL SAFETY: bazı editorler <p> ile slider içine girmişse
   p marginleri sliderda bozulma yapmasın
   ========================================================= */
.oc-slides p{ margin:0 !important; padding:0 !important; }
.oc-dots{
  position:absolute;
  left:0; right:0;
  bottom:12px;
  display:flex;
  justify-content:center;
  gap:8px;
  z-index:6;
}

.oc-dot{
  width:10px; height:10px;
  border-radius:50%;
  border:none;
  background: rgba(255,255,255,.5);
  cursor:pointer;
}

.oc-dot.active{
  background: rgba(255,255,255,.95);
}
/* ============================= */
/* HEADER SOL ÜST ANALOG SAAT */
/* ============================= */

/* Header referans alsın */
.site-hero,
.site-header,
header {
  position: relative;
}

/* Saat gövdesi */
.oc-clock{
  width: 140px;
  aspect-ratio: 1 / 1;
  position: relative;
  border-radius: 50%;
  background: url("/templates/ozceylan/images/saat/saat.png") center/contain no-repeat;
}

/* Header içi konum */
.oc-clock--header{
  position: absolute !important;
  top: 18px;     /* yukarı-aşağı */
  left: 28px;    /* sağ-sol */
  z-index: 9999;
}

/* Saat kolları */
.oc-clock .hand{
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(0deg);
  border-radius: 999px;
  pointer-events: none;
}

.oc-clock .hand.hour{
  width: 8px;
  height: 26%;
  background: #ffffff;
}

.oc-clock .hand.minute{
  width: 5px;
  height: 36%;
  background: #ffffff;
}

.oc-clock .hand.second{
  width: 3px;
  height: 40%;
  background: #e53935;
}

/* Orta pim */
.oc-clock .pin{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 3px solid #111;
  border-radius: 50%;
}

/* Mobilde küçült */
@media (max-width: 768px){
  .oc-clock{
    width: 95px;
  }
  .oc-clock--header{
    top: 10px;
    left: 10px;
  }
}
/* Saat header'ın sol üstüne sabitle */
.oc-clock--header{
  position: fixed !important;   /* sayfada sabit dursun */
  top: 110px;                   /* header yüksekliğine göre */
  left: 30px;
  z-index: 99999;
}

/* İstersen header içindeymiş gibi görünsün */
.oc-clock{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}

/* Mobilde daha küçük ve aşağı */
@media (max-width: 768px){
  .oc-clock--header{
    top: 150px;
    left: 10px;
  }
}
/* Sol üst sabit saat */
.oc-clock--header{
  position: fixed !important;
  top: 90px !important;      /* header altına yakın */
  left: 15px !important;     /* içeri al */
  z-index: 999999 !important;
}

/* Saatin boyutu (görsel/kap) */
.oc-clock--header img{
  width: 140px !important;
  height: 140px !important;
  border-radius: 50% !important;
  display: block;
}

/* Mobilde daha da küçült */
@media (max-width: 768px){
  .oc-clock--header{ top: 75px !important; left: 10px !important; }
  .oc-clock--header img{ width: 110px !important; height: 110px !important; }
}
/* Header içinde saat */
.site-hero {               /* senin header class'ı bu görünüyor */
  position: relative;
  overflow: hidden;        /* taşmayı kes */
}

.oc-clock--header{
  position: absolute !important;
  top: 18px !important;    /* lacivert alan içinde */
  left: 18px !important;
  z-index: 9999 !important;
}
/* Clock görünüm + iğnelerin doğru merkezden dönmesi */
.oc-clock{
  width: 150px;
  height: 150px;
  position: relative;
}

.oc-clock-face{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

/* İğneler merkez noktası: tam orta */
.oc-clock .hand{
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 100%;     /* alt uç merkez */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* Boylar */
.oc-clock .hand.hour{ width: 6px; height: 42px; }
.oc-clock .hand.min { width: 4px; height: 58px; }
.oc-clock .hand.sec { width: 2px; height: 66px; background:#e53935; }
<?php
defined('_JEXEC') or die;

use Joomla\CMS\Factory;

$app  = Factory::getApplication();
$doc  = $app->getDocument();
$menu = $app->getMenu();

/* CSS */
$doc->addStyleSheet('templates/' . $this->template . '/css/style.css');

/* Aktif sayfa ana sayfa mı? */
$active  = $menu->getActive();
$default = $menu->getDefault();
$isHome  = ($active && $default && ((int)$active->id === (int)$default->id));

/* İletişim sayfası mı? (com_contact) */
$option    = $app->input->getCmd('option', '');
$view      = $app->input->getCmd('view', '');
$isContact = ($option === 'com_contact' && $view === 'contact');

/* Slider JS (sadece ana sayfada) */
if ($isHome) {
  $doc->addScript('templates/' . $this->template . '/js/slider.js');
}
?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
 <jdoc:include type="metas" />
<jdoc:include type="styles" />
<jdoc:include type="scripts" />

<style>
/* WhatsApp ikon kesin küçülsün */
.whatsapp-float{ width:56px!important; height:56px!important; }
.whatsapp-float svg{ width:26px!important; height:26px!important; display:block!important; }

/* Kutular kesin yanyana gelsin */
.home-boxes{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:14px!important;
  flex-wrap:wrap!important;
}
.home-box{
  display:inline-flex!important;
  min-width:220px!important;
}

/* Slider alt alta düşmesin (WYSIWYG <p> sararsa bile) */
.oc-slider{ overflow:hidden!important; }
.oc-slides{
  display:flex!important;
  width:100%!important;
  height:100%!important;
}
.oc-slides > *{ flex:0 0 100%!important; }
.oc-slides p{ margin:0!important; }
.oc-slides img{ width:100%!important; height:100%!important; display:block!important; object-fit:cover!important; }
</style>
</head>
<body>

<!-- HERO / HEADER -->
<header class="site-hero">
  <div class="hero-inner">
    <a class="brand" href="<?php echo $this->baseurl; ?>">
      <img class="brand-logo"
           src="templates/<?php echo $this->template; ?>/images/logo.png"
           alt="Öz Ceylan Turizm">
      <div class="brand-text">
        <h1 class="brand-title">Öz Ceylan Turizm</h1>
        <p class="brand-tagline">Güvenli, Konforlu ve Zamanında Taşımacılık</p>
      </div>
    </a>
  </div>
</header>

<!-- KUTULAR (HER SAYFADA) -->
<section class="homeboxes-wrap">
  <div class="container">
    <jdoc:include type="modules" name="homeboxes" style="none" />
  </div>
</section>

<!-- SADECE ANASAYFA: SLIDER (KUTULARIN ALTINDA) -->
<?php if ($isHome): ?>
  <section class="home-slider-wrap">
    <div class="container">
      <jdoc:include type="modules" name="banner" style="none" />
    </div>
  </section>
<?php endif; ?>

<!-- CONTENT -->
<main class="site-main">
  <div class="container">

    <?php if ($isContact): ?>
      <div class="contact-layout">
        <div class="contact-left">
          <jdoc:include type="component" />
        </div>
        <aside class="contact-right">
          <jdoc:include type="modules" name="contact-side" style="none" />
        </aside>
      </div>
    <?php else: ?>
      <jdoc:include type="component" />
    <?php endif; ?>

  </div>
</main>

<!-- FOOTER -->
<footer class="site-footer">
  <div class="container">
    <p>© <?php echo date('Y'); ?> Öz Ceylan Turizm</p>
  </div>
</footer>

<!-- WhatsApp Sabit Buton -->
<!-- WhatsApp Sabit Buton -->
<a class="whatsapp-float"
   href="https://wa.me/9053373955420?text=Merhaba%20%C3%96z%20Ceylan%20Turizm,%20bilgi%20almak%20istiyorum."
   target="_blank" rel="noopener"
   aria-label="WhatsApp ile mesaj gönder">
  <img class="wa-img"
       src="templates/<?php echo $this->template; ?>/images/whatsapp.png"
       alt="WhatsApp">
</a>


<jdoc:include type="modules" name="debug" style="none" />
</body>
</html>
/* ============================= */
/* HEADER SOL ÜST ANALOG SAAT     */
/* ============================= */

.site-hero{
  position: relative;
  overflow: hidden; /* lacivert alan dışına taşmasın */
}

.oc-clock--header{
  position: absolute !important;
  top: 12px !important;
  left: 370px !important;
  z-index: 50 !important;
  width: 140px;
  height: 140px;
}

.oc-clock-face{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}

/* Kollar */
.oc-clock .hand{
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(0deg); /* ✅ merkeze oturur */
  border-radius: 999px;
  pointer-events: none;
}

.oc-clock .hand.hour{
  width: 6px;
  height: 36px;
  background: #fff;
}

.oc-clock .hand.minute{
  width: 4px;
  height: 52px;
  background: #fff;
}

.oc-clock .hand.second{
  width: 2px;
  height: 60px;
  background: #e53935;
}

/* Orta pim */
.oc-clock .pin{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 2px solid #111;
  border-radius: 50%;
}

/* Mobil */
@media (max-width: 768px){
  .oc-clock--header{
    width: 105px;
    height: 105px;
    top: 10px !important;
    left: 10px !important;
  }

  .oc-clock .hand.hour{ height: 28px; }
  .oc-clock .hand.minute{ height: 40px; }
  .oc-clock .hand.second{ height: 46px; }
}
/* ============================= */
/* HEADER SAĞ TARAF AKAN HABERLER */
/* ============================= */

.site-hero{
  position: relative;
}

/* Kutu */
.header-news{
  position: absolute;
  top: 20px;
  right: 30px;          /* LOGONUN SAĞI */
  width: 300px;
  height: 120px;
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  z-index: 9999;
}

/* Joomla makale listesi */
.header-news ul{
  list-style: none;
  margin: 0;
  padding: 0;
  animation: news-scroll 18s linear infinite;
}

.header-news li{
  margin-bottom: 12px;
  line-height: 1.4;
}

/* Hover olunca dursun */
.header-news:hover ul{
  animation-play-state: paused;
}

/* Aşağı doğru akış */
@keyframes news-scroll{
  0%   { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

/* Mobilde gizle (istersen) */
@media (max-width: 992px){
  .header-news{
    display: none;
  }
}
/* =========================
   HEADER HABER TICKER (PRO)
   ========================= */

.site-hero{ position: relative; }

.header-news{
  position:absolute;
  top: 16px;               /* header içinde yukarı-aşağı */
  right: 18px;             /* logo sağ tarafı */
  width: min(520px, 46vw); /* ekrana göre */
  z-index: 9999;
}

.oc-ticker{
  position: relative;
  border-radius: 14px;
  padding: 8px 10px;
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  overflow: hidden;
}

.oc-ticker__track{
  display:flex;
  width:max-content;
  gap: 18px;
  animation: ocMarquee 22s linear infinite;
}
.oc-ticker:hover .oc-ticker__track{
  animation-play-state: paused;
}

.oc-ticker__list{
  display:flex;
  gap: 18px;
  list-style:none;
  padding:0;
  margin:0;
  align-items:center;
}

.oc-ticker__item{
  white-space: nowrap;
  font-size: 13px;
  color:#fff;
  opacity:.92;
}
.oc-ticker__item a{
  color:#fff;
  text-decoration:none;
  border-bottom:1px dashed rgba(255,255,255,.35);
}
.oc-ticker__item a:hover{ opacity:1; }

@keyframes ocMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Fade kenarlar */
.oc-ticker__fade{
  position:absolute; top:0; bottom:0; width:36px;
  pointer-events:none;
}
.oc-ticker__fade--left{ left:0; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0)); }
.oc-ticker__fade--right{ right:0; background: linear-gradient(270deg, rgba(0,0,0,.35), rgba(0,0,0,0)); }

/* Mobilde aşağı alıp genişlet */
@media (max-width: 768px){
  .header-news{
    top: 72px;
    right: 10px;
    width: calc(100% - 20px);
  }
}
/* ===== HEADER HABER TICKER ===== */
.header-news{
  position:absolute;
  right:20px;
  top:18px;
  width:360px;              /* alan genişliği */
  overflow:hidden;
  white-space:nowrap;
  z-index:9999;
}

.header-news .ticker{
  display:inline-block;
  padding-left:100%;
  animation: ocTicker 18s linear infinite;
}

.header-news .ticker:hover{
  animation-play-state: paused; /* üstüne gelince dur */
}

.header-news .ticker a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  margin-right:28px;
  opacity:.95;
}

.header-news .ticker a:hover{ opacity:1; text-decoration:underline; }

@keyframes ocTicker{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* mobilde alta al */
@media (max-width:768px){
  .header-news{
    position:relative;
    right:auto;
    top:auto;
    margin-top:10px;
    width:100%;
    text-align:center;
  }
  .header-news .ticker{
    padding-left:100%;
  }
}
/* ===== HEADER NEWS TICKER (oc-news) ===== */
.header-news { 
  width: 420px;
  max-width: 46vw;
}

.oc-news{
  display:flex;
  align-items:center;
  gap:10px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 10px 12px;
  overflow:hidden;
}

.oc-news__label{
  font-weight: 800;
  color:#fff;
  white-space: nowrap;
  opacity: .95;
  padding-right: 8px;
  border-right: 1px solid rgba(255,255,255,.22);
}

.oc-news__marquee{
  overflow:hidden;
  white-space: nowrap;
  flex: 1;
}

.oc-news__track{
  display:inline-flex;
  gap: 22px;
  align-items:center;
  padding-left: 100%;
  animation: ocNewsMove 18s linear infinite;
}

.oc-news__marquee:hover .oc-news__track{
  animation-play-state: paused;
}

.oc-news__item{
  color:#fff !important;
  text-decoration:none !important;
  font-weight:600;
  opacity:.95;
}
.oc-news__item:hover{ opacity:1; text-decoration:underline !important; }

@keyframes ocNewsMove{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Mobilde alt satıra */
@media (max-width: 900px){
  .header-news{ width:100%; max-width:100%; margin-top:10px; }
  .oc-news{ width:100%; }
}