:root{
    --bg-cream:#ede3d1;
    --maroon-dark:#5a0f11;
    --maroon:#811719;
    --maroon-light:#a03538;
    --accent-red:#811719;
    --accent-red-dark:#5a0f11;
    --accent-navy:#1f3350;
    --tobacco:#b6884f;
    --ink:#2b241d;
    --ink-soft:#6b5f4f;
    --cream-card:#f5ecdc;
    --gold:#b6884f;
    --white:#ffffff;
    --shadow:0 8px 24px rgba(30,25,15,0.18);
    --radius-lg:6px;
    --radius-md:4px;
    --radius-sm:4px;
    --font-display:'Bodoni Moda', 'Playfair Display', Georgia, serif;
    --font-script:'Cormorant Garamond', Georgia, serif;
    --font-body:'Jost', 'Segoe UI', Arial, sans-serif;
  }
  
.design-credit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 22px 12px 34px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: unset;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #000000;
}
.design-credit::before,
.design-credit::after{
  content:"";
  width:40px;
  height:1px;
  background:linear-gradient(90deg,transparent,#b08d57); /* altın çizgi */
}
.design-credit::after{transform:scaleX(-1)}
.design-credit b{
  color:#4a1414;                 /* GANJUE daha koyu ve kalın */
  font-weight:800;
  letter-spacing:.18em;
}


  *{box-sizing:border-box; margin:0; padding:0;}

  html{
    background:#14100c;
    /* Dikey scroll çubuğu için yer HER ZAMAN ayrılsın (iki katmanlı güvence):
       modern tarayıcıda scrollbar-gutter, eskilerde overflow-y:scroll.
       Böylece içerik yüklenince çubuk belirip kaybolarak sayfayı yana kaydırmaz. */
    scrollbar-gutter:stable;
    overflow-y:scroll;
    overflow-x:hidden;
  }
  
  /* Ana sayfadaki imza/logo görselini ekrana sığdır */
.home-logo-img {
  display: block;
  width: auto !important;
  max-width: 74% !important;
  max-height: 120px !important;
  margin: 12px auto 24px !important;
  object-fit: contain !important;
}
/* W logosu ile imza arasını toparla */
.home-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 30px 0 5px;
}

  body{
    font-family:var(--font-body);
    background:#14100c;
    display:flex;
    justify-content:center;
    min-height:100vh;
    overflow-x:hidden;
  }

  /* Splash açıkken arkadaki sayfa kaymasın (JS varsa devrede) */
  html.yukleniyor body{overflow-y:hidden;}
  /* JS kapalıysa kilitlenme */
  .no-js .splash{display:none;}

  /* ============ PHONE FRAME ============ */
  .app{
    width:100%;
    max-width:420px;
    min-height:100vh;
    background:var(--bg-cream);
    position:relative;
    overflow-x:hidden;
    box-shadow:0 0 60px rgba(0,0,0,0.5);
    /* Splash arkasında hazırlanırken görünmez; splash kapanınca yumuşak belirir */
    opacity:0;
    transition:opacity .45s ease;
  }
  html:not(.yukleniyor) .app{opacity:1;}
  .no-js .app{opacity:1;}
  /* Son güvenlik ağı: JS bir hata alıp splash'ı kapatamasa bile
     içerik bir süre sonra kesinlikle görünür olsun (saf CSS, JS'e bağımlı değil).
     JS'in MAX_SURE'undan (6sn) biraz sonra devreye girer. */
  .app{animation:appGuvence 0s linear 6.5s forwards;}
  @keyframes appGuvence{to{opacity:1;}}

  .screen{
    background-color:#000;
    display:none;
    min-height:100vh;
    padding-bottom:100px;
    animation:fadeIn .35s ease;
  }
  .screen.active{display:block;}

  @keyframes fadeIn{
    from{opacity:0; transform:translateY(8px);}
    to{opacity:1; transform:translateY(0);}
  }
  
  
  /* ===== iOS TARZI KAYDIRARAK GERİ GEÇİŞ ===== */
  /* Sürükleme sırasında geçici olarak görünür kılınan önceki ekran */
  .screen.geri-perde{
    display:block;
    position:fixed;
    top:0; left:0;
    width:100%;
    max-width:420px;
    min-height:100vh;
    animation:none;              /* fadeIn tetiklenmesin */
    z-index:60;                  /* aktif ekranın altında dursun */
    filter:brightness(0.82);     /* arkadaki ekran hafif koyu (derinlik hissi) */
  }
  /* Sürüklenen (öndeki) aktif ekran */
  .screen.suruklenıyor{
    position:relative;
    z-index:70;
    animation:none;
    box-shadow:-8px 0 24px rgba(0,0,0,0.28);  /* sol kenarında gölge */
    will-change:transform;
  }
  /* Parmak bırakılınca yumuşak tamamlanma/geri dönme animasyonu */
  .screen.gecis-bitir{
    transition:transform .28s cubic-bezier(.25,.6,.3,1);
  }
  .screen.geri-perde.gecis-bitir{
    transition:transform .28s cubic-bezier(.25,.6,.3,1), filter .28s ease;
  }
  

  /* ============ TOP BAR (inner pages) ============ */
  .topbar{
    background:linear-gradient(180deg, var(--maroon-dark), var(--maroon));
    padding:16px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;
    z-index:50;
    box-shadow:0 4px 14px rgba(0,0,0,0.25);
  }
  .topbar .icon-btn{
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    color:var(--bg-cream);
    background:rgba(255,255,255,0.08);
    border-radius:50%;
    cursor:pointer;
    border:none;
    font-size:18px;
    transition:background .2s;
  }
  .topbar .icon-btn:hover{background:rgba(255,255,255,0.18);}
  /* Topbar dışında kullanılan ikon butonlar (ana ekran + arama paneli) */
  .icon-btn.on-cream, .search-head .icon-btn{
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    cursor:pointer;
    font-size:18px;
    transition:background .2s;
  }
  .icon-btn.on-cream{
    color:var(--maroon-dark);
    background:rgba(129,23,25,0.08);
    border:1px solid rgba(129,23,25,0.25);
  }
  .icon-btn.on-cream:hover{background:rgba(129,23,25,0.15);}
  .search-head .icon-btn{
    color:var(--bg-cream);
    background:rgba(255,255,255,0.08);
    border:none;
    flex:0 0 38px;
  }
  .search-head .icon-btn:hover{background:rgba(255,255,255,0.18);}
  .topbar .icon-group{display:flex; align-items:center; gap:8px;}

  /* Ortadaki yazı markası */
  .brand-word{
    font-family:var(--font-display);
    font-style:italic;
    font-weight:600;
    font-size:19px;
    letter-spacing:.5px;
    color:var(--bg-cream);
    text-shadow:0 1px 2px rgba(0,0,0,0.25);
    user-select:none;
  }

  /* ============ DETAY GALERİ ŞERİDİ ============ */
  .detail-thumbs{
    display:flex; gap:8px;
    padding:10px 18px 0;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .detail-thumbs::-webkit-scrollbar{display:none;}
  .detail-thumbs:empty{display:none;}
  .detail-thumbs img{
    width:56px; height:56px;
    object-fit:cover;
    border-radius:8px;
    border:2px solid transparent;
    cursor:pointer;
    flex:0 0 auto;
    opacity:.65;
    transition:all .2s;
  }
  .detail-thumbs img.secili{border-color:var(--maroon); opacity:1;}

  /* ============ LIGHTBOX ============ */
  .lightbox{
    display:none;
    position:fixed; inset:0; z-index:200;
    background:rgba(15,10,8,0.93);
    align-items:center; justify-content:center;
  }
  .lightbox.acik{display:flex;}
  .lightbox img{
    max-width:94vw; max-height:82vh;
    object-fit:contain;
    border-radius:6px;
    box-shadow:0 10px 40px rgba(0,0,0,0.6);
    animation:fadeIn .25s ease;
  }
  .lb-btn{
    position:absolute;
    background:rgba(237,227,209,0.12);
    border:1px solid rgba(237,227,209,0.3);
    color:var(--bg-cream);
    width:44px; height:44px;
    border-radius:50%;
    font-size:22px; line-height:1;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s;
    z-index:2;
  }
  .lb-btn:hover{background:rgba(237,227,209,0.25);}
  .lb-close{top:18px; right:18px;}
  .lb-prev{left:10px; top:50%; transform:translateY(-50%);}
  .lb-next{right:10px; top:50%; transform:translateY(-50%);}
  .lb-counter{
    position:absolute;
    bottom:22px; left:50%; transform:translateX(-50%);
    color:var(--bg-cream);
    font-family:var(--font-body);
    font-size:13px;
    letter-spacing:1.5px;
    background:rgba(0,0,0,0.35);
    padding:5px 14px;
    border-radius:20px;
  }

  /* ============ ARAMA OVERLAY ============ */
  .search-overlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:100;
    background:rgba(20,16,10,0.55);
    justify-content:center;
  }
  .search-overlay.open{display:flex;}
  .search-panel{
    width:100%;
    max-width:420px;
    background:var(--bg-cream);
    min-height:100vh;
    animation:fadeIn .25s ease;
  }
  .search-head{
    background:linear-gradient(180deg, var(--maroon-dark), var(--maroon));
    padding:14px 16px;
    display:flex;
    align-items:center;
    gap:10px;
    position:sticky;
    top:0;
  }
  .search-input{
    flex:1;
    background:rgba(255,255,255,0.12);
    border:1px solid rgba(237,227,209,0.35);
    border-radius:var(--radius-md);
    color:var(--bg-cream);
    font-family:var(--font-body);
    font-size:14px;
    padding:10px 14px;
    outline:none;
  }
  .search-input::placeholder{color:rgba(237,227,209,0.6);}
  .search-results{padding:12px 16px 40px;}
  .search-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:13px 4px;
    border-bottom:1px solid rgba(43,36,29,0.12);
    cursor:pointer;
  }
  .search-row .sr-name{
    font-family:var(--font-display);
    font-weight:600;
    font-size:14.5px;
    color:var(--ink);
  }
  .search-row .sr-cat{
    font-family:var(--font-body);
    font-size:11px;
    color:var(--ink-soft);
    margin-top:2px;
  }
  .search-row .sr-price{
    font-family:var(--font-body);
    font-weight:600;
    font-size:13px;
    color:var(--accent-red);
    white-space:nowrap;
  }
  .search-hint{
    text-align:center;
    font-size:12.5px;
    color:var(--ink-soft);
    padding:30px 20px;
    font-style:italic;
    font-family:var(--font-script);
  }

  /* ============ HOME SCREEN ============ */
  #home{
    padding:24px 20px 40px;
    background:linear-gradient(180deg, rgba(237,227,209,0.92) 0%, rgba(237,227,209,0.8) 55%, rgba(237,227,209,0.68) 100%), url('bg-home.jpg') center bottom / cover no-repeat;
  }
  #home.active{
    display:flex;
    flex-direction:column;
  }
  #home .info-banner{margin-top:auto;}
  .home-header{display:flex; justify-content:space-between; align-items:center;}
  .lang-flags{display:flex; gap:8px; align-items:center;}
  .flag-btn{
    width:36px; height:36px;
    border-radius:50%;
    overflow:hidden;
    padding:0;
    border:2px solid rgba(129,23,25,0.25);
    cursor:pointer;
    opacity:.5;
    filter:grayscale(35%);
    transition:all .25s ease;
    background:none;
    display:flex;
    box-shadow:0 2px 6px rgba(30,25,15,0.15);
  }
  .flag-btn svg{width:100%; height:100%; display:block;}
  .flag-btn.aktif{
    opacity:1;
    filter:none;
    border-color:var(--maroon);
    transform:scale(1.12);
    box-shadow:0 3px 10px rgba(129,23,25,0.35);
  }
  /* Dil bayrakları her dilde aynı sırada (TR-EN-AR) ve aynı konumda kalsın;
     RTL sayfa yönü bunları etkilemesin */
  .home-header{direction:ltr;}
  .lang-flags{direction:ltr;}
  .home-logo-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin:70px 0 5px;
  }
  /* ============ YÜKLEME EKRANI ============ */
  .splash{
    position:fixed;
    inset:0;
    z-index:999;
    background:linear-gradient(160deg, var(--maroon-dark) 0%, var(--maroon) 55%, #6d1315 100%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    transition:opacity .5s ease, visibility .5s;
  }
  .splash.gizle{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
  .splash-logo{
    width:84px; height:84px;
    border-radius:50%;
    border:2px solid rgba(237,227,209,0.55);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display);
    font-size:38px; font-weight:700;
    color:var(--bg-cream);
    animation:splashNefes 2s ease-in-out infinite;
  }
  @keyframes splashNefes{
    0%,100%{transform:scale(1); box-shadow:0 0 0 0 rgba(237,227,209,0.25);}
    50%{transform:scale(1.05); box-shadow:0 0 0 14px rgba(237,227,209,0);}
  }

  /* ============ EKRAN GEÇİŞ YÜKLEMESİ ============ */
  .gecis-yukleme{
    position:absolute;
    inset:0;
    z-index:90;
    background:var(--bg-cream);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:opacity .18s ease, visibility .18s;
  }
  .gecis-yukleme.acik{
    opacity:1;
    visibility:visible;
  }
  .gecis-spinner{
    width:38px; height:38px;
    border:3px solid rgba(129,23,25,0.18);
    border-top-color:var(--maroon);
    border-radius:50%;
    animation:gecisDon .7s linear infinite;
  }
  @keyframes gecisDon{to{transform:rotate(360deg);}}
  .splash-brand{
    font-family:var(--font-display);
    font-style:italic;
    font-size:26px;
    font-weight:600;
    color:var(--bg-cream);
    letter-spacing:1px;
  }
  .splash-tagline{
    font-family:var(--font-script);
    font-size:14px;
    color:rgba(237,227,209,0.75);
    font-style:italic;
  }
  .splash-bar{
    width:150px;
    height:3px;
    margin-top:18px;
    border-radius:2px;
    background:rgba(237,227,209,0.2);
    overflow:hidden;
  }
  .splash-bar-fill{
    height:100%;
    width:5%;
    border-radius:2px;
    background:var(--bg-cream);
    transition:width .3s ease;
  }

  .home-logo{
    width:118px; height:118px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, var(--maroon-light), var(--maroon-dark));
    display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow), inset 0 0 0 3px rgba(237,227,209,0.25);
    color:var(--bg-cream);
    font-family:var(--font-display);
    font-size:34px;
    font-weight:600;
    letter-spacing:1px;
    border:1px solid rgba(237,227,209,0.3);
    position:relative;
  }
  .home-logo::after{
    content:'';
    position:absolute;
    bottom:22px; right:30px;
    width:9px; height:9px;
    background:var(--accent-red);
    clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
  }
  .home-logo-caption{
    margin-top:16px;
    font-family:var(--font-display);
    font-size:20px;
    font-weight:600;
    color:var(--ink);
    letter-spacing:.5px;
  }
  .home-logo-tagline{
    margin-top:6px;
    font-family:var(--font-script);
    font-style:italic;
    font-size:14px;
    font-weight:500;
    color:var(--ink-soft);
  }

/* ===== SAFARI KESIN ORTALAMA — son çare, tüm yön bug'larını kapatır ===== */
.category-item {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
  -webkit-box-align: center !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  text-align: center !important;
  direction: ltr !important;
}
.category-item .category-icon {
  width: 52px !important;
  height: 52px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  align-self: center !important;
}
.category-item .category-icon img,
.category-item .category-icon svg {
  width: 75px !important;
  height: 75px !important;
  display: block !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

.category-label {
  font-size: 17px !important;
}


  .category-circle{
    width:64px; height:64px;
    border-radius:50%;
    background:linear-gradient(160deg, var(--maroon-light), var(--maroon-dark));
    display:flex; align-items:center; justify-content:center;
    color:var(--bg-cream);
    box-shadow:0 6px 14px rgba(129,23,25,0.35);
    transition:transform .2s;
    font-size:24px;
  }
  .category-item:active .category-circle{transform:scale(0.92);}
  .category-label{
    font-family:var(--font-body);
    font-size:12px;
    font-weight:500;
    letter-spacing:.3px;
    color:var(--ink);
    text-align:center;
  }

  .info-banner{
    background:var(--maroon-dark);
    color:var(--bg-cream);
    border:1px solid rgba(237,227,209,0.25);
    border-radius:var(--radius-md);
    padding:16px 18px;
    text-align:center;
    font-family:var(--font-body);
    font-size:12px;
    letter-spacing:.2px;
    line-height:1.8;
  }

  /* ============ CATEGORY / SUBCATEGORY GRID ============ */
  .content-pad{padding:16px 16px 20px;background-color:#000;}

  .grid-2col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }

  .tile-card{
    position:relative;
    border-radius:var(--radius-md);
    overflow:hidden;
    aspect-ratio:1/0.95;
    background:var(--cream-card);
    box-shadow:var(--shadow);
    cursor:pointer;
  }
  .tile-card .tile-img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }
  .tile-img-placeholder{
    width:100%; height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px;
    background:repeating-linear-gradient(135deg, #d8c8ac, #d8c8ac 10px, #cdbb9c 10px, #cdbb9c 20px);
    color:var(--ink-soft);
    font-size:11px;
    text-align:center;
    padding:8px;
  }
  .tile-img-placeholder svg{width:26px; height:26px; opacity:.6;}
  .tile-caption{
    position:absolute;
    bottom:0; left:0; right:0;
    background:linear-gradient(0deg, rgba(20,16,10,0.92), rgba(20,16,10,0.5) 70%, transparent);
    color:var(--white);
    padding:24px 12px 12px;
    font-family:var(--font-display);
    font-weight:600;
    font-size:14.5px;
    line-height:1.3;
  }
  .tile-price{
    display:block;
    font-family:var(--font-body);
    font-weight:600;
    font-size:12.5px;
    letter-spacing:.3px;
    color:var(--tobacco);
    margin-top:4px;
  }

  /* ============ BOTTOM NAV (product grid pages) ============ */
  .bottom-nav{
    position:fixed;
    bottom:0; left:50%;
    transform:translateX(-50%);
    width:100%;
    max-width:420px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:var(--maroon-dark);
    box-shadow:0 -6px 18px rgba(0,0,0,0.3);
    z-index:40;
  }
  .bottom-nav button{
    background:none;
    border:none;
    color:var(--bg-cream);
    font-size:12px;
    font-weight:500;
    letter-spacing:.3px;
    padding:14px 4px;
    cursor:pointer;
    opacity:.8;
    font-family:var(--font-body);
  }
  .bottom-nav button.active{
    opacity:1;
    background:rgba(255,255,255,0.08);
    border-top:2px solid var(--gold);
  }

  /* ============ PRODUCT DETAIL ============ */
  .detail-hero{
    position:relative;
    margin:14px 16px 0;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow);
  }
  .detail-hero img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
  }
  .detail-hero .heart-btn{
    position:absolute;
    top:14px; right:14px;
    width:38px; height:38px;
    border-radius:50%;
    background:rgba(255,255,255,0.85);
    display:flex; align-items:center; justify-content:center;
    font-size:17px;
    color:var(--maroon-dark);
  }
  .detail-price-bar{
    background:var(--maroon);
    color:var(--white);
    padding:16px 18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-radius:0 0 var(--radius-lg) var(--radius-lg);
    margin-top:-6px;
  }
  .detail-price-bar h2{font-family:var(--font-display); font-size:19px; font-weight:600;}
  .detail-price-bar span{font-family:var(--font-body); font-size:16px; font-weight:600; letter-spacing:.3px; color:var(--tobacco);}

  .detail-desc-box{
    margin:16px 16px;
    background:var(--maroon-light);
    color:var(--bg-cream);
    border-radius:var(--radius-md);
    padding:16px 18px;
  }
  .detail-desc-box p{
    font-family:var(--font-script);
    font-style:italic;
    font-size:15px;
    opacity:.95;
    margin-bottom:8px;
  }
  .detail-desc-box .kcal{
    font-family:var(--font-body);
    font-size:12.5px;
    font-weight:500;
    display:flex;
    align-items:center;
    gap:6px;
  }

  .similar-heading{
    padding:0 16px;
    font-family:var(--font-display);
    font-size:16px;
    font-weight:600;
    color:var(--ink);
    margin-bottom:10px;
  }
  .similar-scroll{
    display:flex;
    gap:12px;
    overflow-x:auto;
    padding:0 16px 10px;
    scrollbar-width:none;
  }
  .similar-scroll::-webkit-scrollbar{display:none;}
  .similar-card{
    flex:0 0 130px;
    border-radius:var(--radius-sm);
    overflow:hidden;
    box-shadow:var(--shadow);
    background:#000;
    cursor:pointer;
  }
  .similar-card img, .similar-card .tile-img-placeholder{
    width:100%;
    height:100px;
    object-fit:cover;
    display:block;
  }
  .similar-card .cap{
    background:var(--maroon-dark);
    color:var(--white);
    font-family:var(--font-display);
    font-size:12px;
    font-weight:500;
    padding:8px;
    line-height:1.3;
  }
  .similar-card .cap .p{font-family:var(--font-body); color:var(--tobacco); font-weight:600; font-size:11px; display:block; margin-top:3px;}

  /* section title used on category/product pages */
  .page-title{
    padding:16px 16px 6px;
    font-family:var(--font-display);
    font-size:18px;
    font-weight:600;
    color:#efe0d2;
  }

  /* empty edit hint */
  .edit-hint{
    text-align:center;
    font-size:11px;
    color:var(--ink-soft);
    padding:10px 20px 0;
    opacity:.7;
  }
/* ============================================================ */
/* ÇOK SAYFALI YAPI — ek stiller (server-side sayfalar)         */
/* ============================================================ */

/* Splash yok artık; .app her zaman görünür olsun */
.app{opacity:1 !important; animation:none !important;}

/* Her sayfa gövdesi (eski .screen'in yerini alır) */
.sayfa{
  background:#000;
  min-height:100vh;
  padding-bottom:40px;
  display:flex;
  flex-direction:column;
  animation:sayfaGel .28s ease;
}
@keyframes sayfaGel{
  from{opacity:0;}
  to{opacity:1;}
}
.home-sayfa{padding:24px 20px 40px;}

/* Ana sayfada arka plan görseli + info banner en altta */
.home-sayfa{
  background:linear-gradient(180deg, rgba(237,227,209,0.92) 0%, rgba(237,227,209,0.8) 55%, rgba(237,227,209,0.68) 100%), url('bg-home-2.jpg') center bottom / cover no-repeat;
}
.home-sayfa .info-banner{margin-top:auto;}

/* ÜRÜN DETAY — sayfa düzeni */
.detail-wrap{padding-bottom:30px;}
.detail-img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  cursor:zoom-in;
  background:#1a1a1a;
}
.detail-img-placeholder{
  width:100%;
  aspect-ratio:1/1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:linear-gradient(135deg, #d8ccb4 0%, #cabfa4 100%);
  color:var(--maroon);
}
.detail-img-placeholder svg{width:52px; height:52px; opacity:.5;}
.detail-img-placeholder span{font-family:var(--font-body); font-size:12px; letter-spacing:1px; opacity:.7;}
.detail-body{padding:18px;}
.detail-kcal{
  font-family:var(--font-body);
  font-size:12.5px;
  color:var(--tobacco);
  margin:6px 0 12px;
}
.detail-desc{
  font-family:var(--font-body);
  font-size:14px;
  margin-top:15px;
  line-height:1.6;
  color:var(--ink-soft, #4a4038);
}

/* ARAMA SAYFASI */
.search-head-bar{gap:10px;}
.search-input-page{
  flex:1;
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(237,227,209,0.4);
  border-radius:var(--radius-md, 8px);
  color:var(--bg-cream);
  font-family:var(--font-body);
  font-size:14px;
  padding:10px 14px;
  outline:none;
}
.search-input-page::placeholder{color:rgba(237,227,209,0.6);}
.search-results-page{padding-top:8px;}
.search-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 4px;
  border-bottom:1px solid rgba(43,36,29,0.12);
  text-decoration:none;
  cursor:pointer;
}
.search-row .sr-name{font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--ink, #2b241d);}
.search-row .sr-cat{font-family:var(--font-body); font-size:11px; color:var(--ink-soft, #6b5f4f); margin-top:2px;}
.search-row .sr-price{font-family:var(--font-body); font-weight:600; font-size:13px; color:var(--accent-red, #811719); white-space:nowrap;}
.search-hint{text-align:center; font-size:12.5px; color:var(--ink-soft, #6b5f4f); padding:30px 20px; font-style:italic;}

/* RTL: geri okları ve hizalama */
[dir="rtl"] .topbar .icon-btn svg{transform:scaleX(-1);}
[dir="rtl"] .search-row{text-align:right;}

/* ============ ÇERÇEVELİ KATEGORİ KARTLARI (mockup tarzı) ============ */
.category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 8px 0 22px;
}
.category-item {
  background: rgba(247, 242, 232, 0.72);
  border: 1.5px solid rgba(129, 23, 25, 0.35);
  border-radius: 18px;
  padding: 22px 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 14px rgba(90, 15, 17, 0.10);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.category-item:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(90, 15, 17, 0.14);
}

.category-icon svg { width: 100%; height: 100%; display: block; }
.category-label {
  font-family: var(--font-display, 'Bodoni Moda', serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: var(--maroon, #811719);
  text-align: center;
}
.category-ayrac {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 60%;
  color: rgba(129, 23, 25, 0.55);
}
.category-ayrac span { flex: 1; height: 1px; background: currentColor; opacity: 0.5; }
.category-ayrac svg { width: 11px; height: 11px; flex: 0 0 auto; }

/* ============ PRO MAX / GENİŞ EKRAN DÜZELTMELERİ ============ */
/* .app'i kesin ortala ve kenar boşluğunu kremle doldur (siyah şerit görünmesin) */
html, body { background: var(--bg-cream, #ede3d1) !important; }
.app {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Eski SPA'dan kalma siyah arka planı temizle */
.screen { background-color: transparent !important; }

/* Placeholder yazısı mavi link rengini alıyordu -> marka rengine çek */
.tile-img-placeholder,
.tile-img-placeholder span,
.txt-gorsel,
.txt-gorsel-detay {
  color: var(--maroon, #811719) !important;
  text-decoration: none !important;
}
.category-item, .tile-card, .similar-card, .search-row, .app a {
  text-decoration: none !important;
  color: inherit;
}

/* Kategori kartında görsel ikon (PNG) — SVG ile aynı alana oturur */
.kat-ikon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ===== SAFARI İKON ORTALAMA (viewBox + preserveAspectRatio ile birlikte) ===== */
.category-item .category-icon {
  width: 52px !important;
  height: 52px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}
.category-item .category-icon svg {
  width: 52px !important;
  height: 52px !important;
  display: block !important;
  margin: 0 !important;
  /* Safari: SVG'yi kendi kabında yatay/dikey ortala */
  object-fit: contain !important;
}