/*
Theme Name: Yalova Apple iPhone Servisi
Theme URI: https://yalovaappleservisi.com/
Author: PhoneFix Smart Service / AppleFix Store Yalova
Author URI: https://phonefixyalova.com.tr/
Description: Yalova Apple iPhone Servisi icin ozel hazirlanmis, hafif, tek-amacli WordPress temasi. iPhone/iPad/Apple Watch/Mac tamir hizmetleri, il/ilce servis sayfalari ve model tamiri sayfalari icin tasarlanmistir.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: yalova-apple-servisi
License: Unlicensed - proprietary, for the site owner's exclusive use.
*/

/* ---- Site-wide chrome: nav, hero/home layout, footer (from the site's nav/home/footer) ---- */

  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #f4f4f4; overflow-x: hidden; }

  .nav {
    background: #000;
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .3px;
  }
  .logo-icon {
    width: 24px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    animation: iconPulse 3.6s ease-in-out 0.1s infinite;
  }
  .logo-text { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.1; }
  .logo-text .l1 { font-size: 20px; font-weight: 700; letter-spacing: .3px; }
  .logo-text .l2 { font-size: 12px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: #bdbdbd; margin-top: 3px; }

  .menu { display: flex; list-style: none; gap: 6px; }
  .menu a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .6px;
    padding: 10px 16px;
    border-radius: 8px;
    transition: background .2s;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .menu .ico {
    width: 15px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    animation: iconPulse 3.6s ease-in-out infinite;
  }
  .menu > li:nth-child(1) .ico { animation-delay: .3s; }
  .menu > li:nth-child(2) .ico { animation-delay: .6s; }
  @keyframes iconPulse {
    0%   { opacity: 1;   filter: brightness(1); }
    50%  { opacity: 0.35; filter: brightness(0.3); }
    100% { opacity: 1;   filter: brightness(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .logo-icon, .menu .ico { animation: none; opacity: 1; filter: none; }
  }
  .menu a:hover { background: rgba(255,255,255,.14); }
  .menu a.active { background: rgba(255,255,255,.2); }

  .burger {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
    width: 44px;
    height: 44px;
  }
  .burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    margin: 5px auto;
    transition: transform .25s, opacity .25s;
  }
  .burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger.open span:nth-child(2) { opacity: 0; }
  .burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .has-submenu { position: relative; }
  .nav-row { display: flex; align-items: center; }
  .nav-row a { flex: 1; }
  .chevron {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 8px;
    margin-left: -4px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .chevron svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
  .chevron:hover { background: rgba(255,255,255,.14); }
  .has-submenu.open > .nav-row .chevron svg,
  .has-submenu:hover > .nav-row .chevron svg { transform: rotate(180deg); }

  .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #0a0a0a;
    border: 1px solid #1e1e1e;
    border-radius: 12px;
    padding: 20px 18px 14px;
    column-count: 2;
    column-gap: 26px;
    width: 440px;
    max-height: 72vh;
    overflow-y: auto;
    box-shadow: 0 16px 40px rgba(0,0,0,.55);
    z-index: 200;
  }
  .submenu a {
    display: block;
    color: #ddd;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: normal;
    padding: 7px 8px;
    border-radius: 6px;
    text-decoration: none;
    break-inside: avoid;
    white-space: nowrap;
  }
  .submenu a:hover { background: rgba(255,255,255,.12); color: #fff; }
  .has-submenu:hover > .submenu,
  .has-submenu.open > .submenu { display: block; }


  .submenu-level1 {
    width: 280px;
    column-count: 1;
    padding: 8px;
    /* .submenu sets overflow-y:auto + max-height, which forces overflow-x to
       compute to auto as well (CSS overflow spec), clipping any nested
       flyout that pops out to the side. This panel's own item list is
       always short, so it never needs to scroll — override back to
       visible so level-2 flyouts ("konular") are never clipped. */
    overflow: visible;
    max-height: none;
  }
  .submenu-level1 .has-submenu { position: relative; }
  .submenu-level1 .nav-row a {
    padding: 11px 12px;
    font-size: 14px;
    font-weight: 600;
  }
  .submenu-level1 .has-submenu .chevron svg { transform: rotate(-90deg); }
  .submenu-level1 .has-submenu:hover > .nav-row .chevron svg,
  .submenu-level1 .has-submenu.open > .nav-row .chevron svg { transform: rotate(90deg); }
  .submenu-level1 .has-submenu > .submenu {
    top: -8px;
    left: 100%;
  }
  .submenu-level1 .has-submenu.flip-left > .submenu {
    left: auto;
    right: 100%;
  }
  .menu > li.has-submenu.flip-left > .submenu {
    left: auto;
    right: 0;
  }

  @media (max-width: 900px) {
    .burger { display: block; }
    .menu {
      position: absolute;
      top: 68px;
      left: 0;
      right: 0;
      background: #000;
      flex-direction: column;
      gap: 0;
      padding: 0 20px;
      max-height: 0;
      overflow: hidden;
      transition: max-height .3s ease;
      border-top: 1px solid transparent;
    }
    .menu.open {
      max-height: calc(100vh - 68px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      border-top-color: #222;
      padding-bottom: 12px;
    }
    .menu a { padding: 14px 8px; border-radius: 0; border-bottom: 1px solid #1a1a1a; }
    .nav-row a { padding: 14px 8px; border-bottom: 1px solid #1a1a1a; }
    .menu a { border-bottom: none; }
    .has-submenu { border-bottom: 1px solid #1a1a1a; }
    .chevron { margin-right: 4px; }
    .submenu {
      position: static;
      display: none;
      width: auto;
      column-count: 2;
      column-gap: 16px;
      border: 0;
      border-radius: 0;
      background: #050505;
      box-shadow: none;
      max-height: none;
      padding: 6px 8px 14px;
    }
    .has-submenu:hover > .submenu { display: none; }
    .has-submenu.open > .submenu { display: block; }
    .submenu a { font-size: 13px; padding: 8px 6px; }
    .submenu-level1 { width: auto; padding: 0; }
    .submenu-level1 .has-submenu > .submenu {
      position: static;
      margin-left: 0;
      column-count: 2;
      background: #000;
      padding: 6px 8px 10px 20px;
    }
    .submenu-level1 .nav-row a { padding: 12px 8px 12px 20px; }
    .submenu-level1 .has-submenu .chevron svg { transform: rotate(0deg); }
    .submenu-level1 .has-submenu:hover > .nav-row .chevron svg,
    .submenu-level1 .has-submenu.open > .nav-row .chevron svg { transform: rotate(180deg); }

    .logo-text .l1 { font-size: 18px; }
    .logo-text .l2 { font-size: 11px; }
  }

  .hero {
    background: #000;
    color: #fff;
    overflow: hidden;
  }
  .hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 48px;
  }
  .hero-text { flex: 1; min-width: 280px; max-width: 720px; }
  .hero-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #9a9a9a;
    background: rgba(255,255,255,.08);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 20px;
  }
  .hero-text h1 {
    font-size: clamp(28px, 5vw, 44px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.5px;
    margin-bottom: 18px;
  }
  .hero-text h1 span { color: #a1a1a1; }
  .hero-text p {
    font-size: clamp(15px, 2vw, 17px);
    line-height: 1.6;
    color: #c9c9c9;
    max-width: 520px;
    margin: 0 auto 32px;
  }
  .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 26px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .15s, background .2s, opacity .2s;
  }
  .btn-primary { background: #fff; color: #000; }
  .btn-primary:hover { background: #e6e6e6; }
  .btn-outline { border: 1px solid rgba(255,255,255,.35); color: #fff; }
  .btn-outline:hover { background: rgba(255,255,255,.08); }
  .btn:active { transform: scale(.97); }

  .hero-media {
    flex: 1;
    min-width: 280px;
    aspect-ratio: 4 / 3;
    border: 1.5px dashed rgba(255,255,255,.25);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.03);
  }
  .hero-media--filled { border: none; background: none; display: block; }
  .hero-media--filled svg { width: 100%; height: 100%; border-radius: 20px; display: block; box-shadow: 0 30px 60px rgba(0,0,0,.55); }
  .hero-logo-stage {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: radial-gradient(ellipse at 50% 45%, #1c1c1e 0%, #000 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 30px 60px rgba(0,0,0,.55);
    overflow: hidden;
  }
  .hero-logo-mark {
    width: auto;
    height: auto;
    max-width: 42%;
    max-height: 60%;
    object-fit: contain;
    filter: drop-shadow(0 18px 40px rgba(0,0,0,.6)) brightness(0.15);
    opacity: 0;
    transform: scale(0.92);
    animation: logoLightUp 2.2s cubic-bezier(.22,.61,.36,1) 0.3s forwards;
  }
  .hero-logo-stage {
    position: relative;
  }
  .hero-logo-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%);
    opacity: 0;
    animation: glowPulse 2.2s ease-out 0.3s forwards;
    pointer-events: none;
  }
  @keyframes logoLightUp {
    0%   { opacity: 0;   transform: scale(0.92); filter: drop-shadow(0 18px 40px rgba(0,0,0,.6)) brightness(0.15); }
    55%  { opacity: 1;   transform: scale(1.03); filter: drop-shadow(0 18px 40px rgba(0,0,0,.6)) brightness(1.35); }
    100% { opacity: 1;   transform: scale(1);    filter: drop-shadow(0 18px 40px rgba(0,0,0,.6)) brightness(1); }
  }
  @keyframes glowPulse {
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-logo-mark { animation: none; opacity: 1; transform: none; filter: drop-shadow(0 18px 40px rgba(0,0,0,.6)); }
    .hero-logo-stage::before { animation: none; display: none; }
  }
  .hero-media > img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; display: block; }
  .hero-media-placeholder {
    text-align: center;
    color: #7a7a7a;
    font-size: 14px;
    padding: 20px;
  }
  .hero-media-placeholder svg { width: 40px; height: 40px; stroke: #555; fill: none; stroke-width: 1.5; margin-bottom: 10px; }

  @media (max-width: 900px) {
    .hero-inner { flex-direction: column; padding: 56px 20px; text-align: center; }
    .hero-text p { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
  }

  .services {
    background: #f4f4f4;
    padding: 60px 20px 72px;
  }
  .services-title {
    max-width: 1200px;
    margin: 0 auto 32px;
    text-align: center;
    font-size: clamp(22px, 3.5vw, 28px);
    font-weight: 800;
    letter-spacing: -.3px;
    color: #111;
  }
  .services-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
  }
  .service-card {
    width: 200px;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
    transition: transform .2s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
  }
  .service-card:hover { transform: translateY(-4px); }
  .service-card img { width: 100%; height: 100%; display: block; }
  .service-name {
    display: block;
    padding: 10px 10px 12px;
    font-size: clamp(12.5px, 1.4vw, 14px);
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    text-align: center;
    letter-spacing: -.1px;
  }
  @media (max-width: 600px) {
    .service-card { width: 140px; }
    .service-name { font-size: 12.5px; padding: 8px 8px 10px; }
  }

  .reviews {
    background: #fbfbfd;
    padding: 88px 20px 72px;
    border-top: 1px solid #e3e3e3;
    position: relative;
  }
  .reviews::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 4px;
    border-radius: 4px;
    background: #111;
  }
  .reviews-inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
  }
  .reviews-title {
    font-size: clamp(20px, 3vw, 25px);
    font-weight: 800;
    letter-spacing: -.3px;
    color: #111;
    margin-bottom: 14px;
  }
  .reviews-text {
    font-size: 15.5px;
    line-height: 1.7;
    color: #555;
    max-width: 620px;
    margin: 0 auto 28px;
  }
  .reviews-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .reviews-note {
    margin-top: 20px;
    font-size: 12.5px;
    color: #9a9a9a;
  }
  .reviews-actions .btn-primary { background: #000; color: #fff; }
  .reviews-actions .btn-primary:hover { background: #1a1a1a; }
  .reviews-actions .btn-outline { border: 1px solid #ccc; color: #111; }
  .reviews-actions .btn-outline:hover { background: #f4f4f4; }
  .reviews-actions .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; margin-right: 8px; }

  .faq {
    background: #fff;
    padding: 72px 20px 80px;
    border-top: 1px solid #e3e3e3;
  }
  .faq-inner {
    max-width: 760px;
    margin: 0 auto;
  }
  .faq-title {
    font-size: clamp(20px, 3vw, 25px);
    font-weight: 800;
    letter-spacing: -.3px;
    color: #111;
    margin-bottom: 26px;
    text-align: center;
  }
  .faq-item { border-top: 1px solid #e3e3e3; padding: 18px 2px; }
  .faq-item:last-child { border-bottom: 1px solid #e3e3e3; }
  .faq-item h3 { font-size: 15.5px; margin-bottom: 6px; color: #111; }
  .faq-item p { font-size: 14.5px; color: #555; line-height: 1.7; margin: 0; }

  @keyframes waBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
  .wa-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(0,0,0,.28);
    z-index: 500;
    animation: waBob 2.6s ease-in-out infinite;
    transition: transform .2s ease;
  }
  .wa-float:hover { animation-play-state: paused; transform: scale(1.08); }
  .wa-float svg { width: 60px; height: 60px; display: block; }

  @media (max-width: 480px) {
    .wa-float { right: 14px; bottom: 14px; width: 54px; height: 54px; }
    .wa-float svg { width: 54px; height: 54px; }
  }



  .site-footer {
    background: #0a0a0a;
    color: #d8d8d8;
    padding: 56px 20px 0;
  }
  .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 36px;
    padding-bottom: 40px;
  }
  .footer-col h3 {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: .2px;
  }
  .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .footer-brand span { font-size: 16px; font-weight: 700; color: #fff; }
  .footer-desc { font-size: 13.5px; line-height: 1.7; color: #9a9a9a; max-width: 320px; }
  .footer-col ul { list-style: none; }
  .footer-col ul li { margin-bottom: 10px; }
  .footer-col ul li a { color: #c9c9c9; text-decoration: none; font-size: 13.5px; }
  .footer-col ul li a:hover { color: #fff; text-decoration: underline; }
  .footer-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.6; color: #c9c9c9; margin-bottom: 14px; }
  .footer-contact svg { width: 18px; height: 18px; flex: none; stroke: #9a9a9a; fill: none; stroke-width: 1.8; margin-top: 1px; }
  .footer-contact a { color: #c9c9c9; text-decoration: none; }
  .footer-contact a:hover { color: #fff; text-decoration: underline; }
  .footer-map { max-width: 1200px; margin: 0 auto 32px; }
  .footer-map-card {
    display: flex; align-items: center; gap: 16px;
    background: #141414; border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px; padding: 18px 20px;
  }
  .footer-map-card svg { width: 26px; height: 26px; flex: none; stroke: #fff; fill: none; stroke-width: 1.5; }
  .footer-map-card-body { display: flex; flex-direction: column; gap: 5px; }
  .footer-map-card-body strong { font-size: 13.5px; color: #fff; font-weight: 700; }
  .footer-map-card-body span { font-size: 12.5px; color: #9a9a9a; line-height: 1.5; }
  .footer-map-card-body a {
    align-self: flex-start; margin-top: 4px; font-size: 12.5px; font-weight: 600;
    color: #111; background: #fff; text-decoration: none;
    border-radius: 999px; padding: 8px 16px;
  }
  .footer-map-card-body a:hover { background: #eee; }
  @media (max-width: 520px) {
    .footer-map-card { flex-direction: column; align-items: flex-start; }
  }
  .footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 20px 0;
    text-align: center;
    font-size: 12.5px;
    color: #777;
  }
  @media (max-width: 800px) {
    .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  }


/* ---- Basic content-page fallbacks ----
   Each imported page (service/model/il-ilce pages) also carries its own
   scoped <style> block inside its post content, exactly as the original
   static HTML page did, so its layout renders correctly regardless of
   theme changes. These rules below only cover the generic WordPress
   editor/page chrome around that content. */
.entry-content { max-width: 900px; margin: 0 auto; padding: 12px 4px; }
.entry-content img { max-width: 100%; height: auto; }